<template>
  <div class="video-full">
    <div class="main">
      <video
        v-show="src"
        :src="src"
        :muted="muted"
        ref="video"
        playsinline
        x5-playsinline
        x5-video-player-type='h5-page'
        @ended="videoEnded"
      ></video>
      <div class="skip" v-if="false" v-btn:click="ended"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Options, Prop, Emit } from 'vue-property-decorator';
@Options({ components: {} })
export default class GlslBg extends Vue {
  @Prop() public src!: string;
  @Prop({ default: false }) public muted!: boolean;
  @Emit() public ended() {}
  public pause() {
    if (this.src) {
      (this.$refs.video as HTMLVideoElement).pause();
    }
    this.videoEnded();
  }
  public play() {
    if (this.src) {
      (this.$refs.video as HTMLVideoElement).play();
    } else {
      this.videoEnded();
    }
  }
  public videoEnded() {
    this.ended();
  }
}
</script>

<style lang="postcss" scoped>
.video-full {
  position: absolute;
  top: 0;right: 0;
  width: 100%;height: 100%;
  overflow: hidden;
  .main{
    position: absolute;
    top: 0;left: 0;
    width: 100%;height: 100%;
  }
  video{
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
